<template>
    <div class="tabbar-item" @click="itemclick">
        <template v-if="!isactived">
            <slot name="img"></slot>
        </template>
        <template v-else>
            <slot name="imga"></slot>
        </template>
        <div  :style="activestyle">
            <slot name="title"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        path:String,
        activecolor:{
            type:String,
            default:'red'
        }
    },
    data() {
        return {
        }
    },
    computed:{
        //动态切换图片文字高亮
        isactived(){
        //    return this.$route.path.indexOf(this.path) !== -1
             return this.$route.path.includes(this.path)
        },
        activestyle(){
            return this.isactived?{color:this.activecolor}:{}
        }

    },
    methods: {
        itemclick(){
            this.$router.replace(this.path).catch(err=>err)
        }
    },
}
</script>

<style scoped>
  .tabbar-item{
    flex:1;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    
  }
  .tabbar-item img{
      margin-top: 4px;
      width: 24px;
      height: 24px;
      vertical-align: middle;
  }
  .active{
      color:red
  }
  
</style>